<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet"/>
<link href="/ajax/libs/jquery-layout/jquery.layout-latest.css"
      th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css"
      th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style>
    .textmsg p {
        line-height: 2em;
    }

    .textmsg {
        margin-top: 20px;
    }
</style>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i>
                </div>
                <div class="box-tools pull-right">
                    <a type="button" class="dropdown-toggle btn btn-box-tool menuItem" data-toggle="dropdown"
                       target="iframe0"
                       title="用户信息">
                        我的信息
                        <i class="fa fa-edit"></i>

                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="javascript:resetPwd()">修改密码</a></li>
                        <li><a href="javascript:avatar()">修改头像</a></li>
                    </ul>
                </div>
            </div>
            <div class="ui-layout-content">
                <div class="text-center">
                    <img alt="image" width="150px" style="border: 1px solid #ebebeb;margin-left: 15%"
                         class="img-circle m-t-xs img-responsive" th:src="${user.avatar}">
                    <div class="m-t-xs font-bold">IP：[[${loginIp}]]</div>
                </div>
                <div class="col-sm-12 textmsg">
                    <p><i class="fa fa-user"> 登录名：</i>[[${user.loginName}]]</p>
                    <p><i class="fa fa-user"> 姓名：</i> [[${user.name}]]</p>
                    <p><i class="fa fa-phone"> 电话：</i> [[${user.tel}]]</p>
                    <p><i class="fa fa-group"> 所属部门：</i> [[${user.deptPo.deptName}]] </p>
                    <p><i class="fa fa-group"> 所在岗位：</i> [[${user.positionPo.positionName}]] </p>
                    <p><i class="fa fa-transgender"> 性别：</i> [[${user.sex}]]</p>
                    <p><i class="fa fa-envelope-o"> 邮箱：</i> [[${user.email}]]</p>
                    <p><i class="fa fa-calendar"> 日期：</i> [[${#dates.format(user.createTime,'yyyy-MM-dd')}]]</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-div ui-layout-center">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-user-edit" th:object="${user}">
            <input name="userId" type="hidden" id="uid" th:field="*{uid}"/>
            <div class="form-group">
                <label class="col-sm-3 control-label">登录名：</label>
                <div class="col-sm-8">
                    <input class="form-control" readonly="readonly" type="text" name="loginName" id="loginName" th:field="*{loginName}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">所在部门：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" readonly="readonly" th:value="*{deptPo.deptName}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">所在岗位：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" readonly="readonly" th:value="*{positionPo.positionName}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">用户姓名：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="name" id="userName" th:field="*{name}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">邮箱：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="email" id="email" th:field="*{email}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">手机：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="tel" id="phonenumber" th:field="*{tel}">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">年龄：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="age" id="age" th:value="*{age}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">性别：</label>
                <div class="col-sm-8">
                    <select id="sex" class="form-control m-b">
                        <option th:value="男" th:field="*{sex}">男</option>
                        <option th:value="女" th:field="*{sex}">女</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">爱好：</label>
                <div class="col-sm-8">
                    <textarea name="hobby" class="form-control" rows="5" cols="70" th:value="*{hobby}"
                              th:text="*{hobby}"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">个人介绍：</label>
                <div class="col-sm-8">
                    <textarea rows="10" cols="70" name="self_introduction" class="form-control"
                              th:value="*{self_introduction}" th:text="*{self_introduction}"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="form-control-static col-sm-offset-9">
                    <button type="submit"  class="btn btn-primary">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    var updateFlag = [[${@permission.hasPermi('user:update')}]];
    var delFlag = [[${@permission.hasPermi('user:del')}]];
    $(document).ready(function () {
        //layuout布局
        var myLayout = $("body").layout({applyDemoStyles: false});
        myLayout.sizePane("west", 250);
    });

    /*用户管理-重置密码*/
    function resetPwd() {
        var url = '/user/resetMyPwd';
        $.modal.open("重置密码", url, '800', '500');
    }
    /** 修改头像**/
    function avatar() {
        var url = '/user/updateAvatar';
        $.modal.openFull("修改头像", url);
    }

    //用户信息表单
    $("#form-user-edit").validate({
        rules:{
            email:{
                required:false,
                email:true,
                remote: {
                    url: "/user/checkEmailUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        email: function () {
                            return $.trim($("#email").val());
                        },
                        uid:function () {
                            return $("#uid").val();
                        }
                    },
                    dataFilter: function (data, type) {
                        if (data == "0") return true;
                        else return false;
                    }
                }
            },
            tel:{
                required:false,
                isPhone:true,
                remote: {
                    url: "/user/checkPhoneUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        tel: function () {
                            return $.trim($("#phonenumber").val());
                        },
                        uid:function () {
                            return $("#uid").val();
                        }
                    },
                    dataFilter: function (data, type) {
                        if (data == "0") return true;
                        else return false;
                    }
                }
            },
        },
        messages: {
            "email": {
                remote: "Email已经存在"
            },
            "tel":{
                remote: "手机号码已经存在"
            }
        },
        hobby:{
            maxlength:150,
        },
        self_introduction:{
            maxlength:150,
        },
        submitHandler:function(form){
            $.operate.save("/user/editSave", $('#form-user-edit').serialize());
        }
    });




</script>
</body>

</html>